<template>
	<view>
		<video-player :currentDramaData="currentDramaData" :startTime="startTime" @getCurrentTime="getCurrentTime"></video-player>
		<video-desc :detailData="detailData"></video-desc>
		<drama-list :dramaListData="detailData.vod_play_url" :currentDramaData="currentDramaData" @select="select"></drama-list>
	</view>
</template>

<script>
	import videoPlayer from '@/components/video-player.vue'
	import videoDesc from '@/components/video-desc.vue'
	import dramaList from '@/components/drama-list.vue'
	import api from '@/api/index.js'
	export default {
		data() {
			return {
				id: 0,
				detailData: {},
				currentDramaData: {},
				startTime: 0,
				currentTime: 0,
			}
		},
		components: {
			videoPlayer,
			videoDesc,
			dramaList
		},
		methods: {
			async load(id) {
				this.detailData = await api.detailData(id)
				let playHistoryData = await api.playHistoryData(id)
				if (playHistoryData) {
					let {
						startTime,
						currentDramaData
					} = playHistoryData
					this.currentDramaData = currentDramaData
					this.startTime = startTime
				} else {
					this.currentDramaData = this.detailData.vod_play_url[0]
					this.startTime = 1
				}

				uni.setNavigationBarTitle({
					title: this.detailData.vod_name
				})
			},
			getCurrentTime(currentTime) {
				this.currentTime = currentTime
			},
			select(currentDramaData) {
				this.currentDramaData = currentDramaData
				this.startTime = 1
			},
			async savePlayHistory() {
				await api.savePlayHistoryData({
					id:this.id,
					detailData:this.detailData,
					currentDramaData:this.currentDramaData,
					currentTime:this.currentTime
				})
			}
		},
		destroyed() {
			this.savePlayHistory()
		},
		onLoad(option) {
			this.id = option.id
			this.load(this.id)
		},
		onUnload() {
			this.savePlayHistory()
		},
	}
</script>

<style>

</style>
